<template>
  <div>
    <el-upload
      :action="$store.state.app.url+'/upload'"
      name="file"
      :data="{
        bucket: 'new-shengxue985',
        path: 'oss/import/agency/background/',
      }"
      :headers="headers"
      :on-progress="handleProgress"
      :file-list="value"
      :on-change="handleChange"
      :on-exceed="handleExceed"
      :on-success="handleSuccess"
      :on-error="handleError"
      :on-remove="handleRemove"
      :on-preview="handlePictureCardPreview"
      list-type="picture-card"
      :auto-upload="true"
      :limit="10"
    >
      <el-button size="small" type="primary">点击上传</el-button>
      <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
    </el-upload>
    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt="">
    </el-dialog>
  </div>
</template>
<script>
import { getToken } from '../../../utils/auth'

export default {
  model: {
    prop: 'value',
    event: 'on-change'
  },
  props: {
    value: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      loading: null,
      dialogImageUrl: '',
      dialogVisible: false,
      headers: {
        Authorization: 'bearer' + getToken(),
        Accept: 'application/json'
      },
      disabled: false
      // fileList: []
    }
  },
  methods: {
    handleRemove(file, fileList) {
      console.log(file)
      this.$emit('on-change', fileList.map(item => {
        const returnData = {}
        if (item.response) {
          returnData['url'] = item.response.url
        } else {
          returnData['url'] = item.url
        }
        return returnData
      }))
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    handleDownload(file) {
      console.log(file)
    },
    handleChange(file, fileList) {
      console.log(file, fileList)
      // this.$emit('on-change', fileList.map(item => {
      //   const returnData = {}
      //   if (item.response) {
      //     returnData['url'] = item.response.url
      //   } else {
      //     returnData['url'] = item.url
      //   }
      //   return returnData
      // }))
    },
    handleProgress() {
      this.loading = this.$loading({
        text: '玩儿命上传中..',
        background: 'rgba(0, 0, 0, 0.8)'
      })
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg'
      const isPNG = file.type === 'image/png'
      const isLt2M = file.size / 1024 / 1024 < 2
      console.log(!(isJPG || isPNG), file)

      const condition = !(isJPG || isPNG)
      if (condition) {
        this.$message.error('上传头像图片只能是 JPG/PNG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return !condition && isLt2M
    },
    handleSuccess(response, file, fileList) {
      if (this.loading) {
        this.loading.close()
      }
      this.$message.success('上传成功')
      console.log('success', this.value)
      this.$emit('on-change', fileList.map(item => {
        const returnData = {}
        if (item.response) {
          returnData['url'] = item.response.url
        } else {
          returnData['url'] = item.url
        }
        return returnData
      }))
    },
    handleError() {
      if (this.loading) {
        this.loading.close()
      }
      this.$message.success('上传失败')
    },
    handleExceed(file, fileList) {
      console.log(file, fileList)
      this.$message.error('最多只能传10张图片')
    }
  }
}
</script>
